<template>
  <div class="herder_title">
    <i class="iconfont icon-zuojiantou" @click="$router.go(-1)"></i>
    <p>
      <slot></slot>
    </p>
    <van-popover
      v-model="showPopover"
      trigger="click"
      :actions="actions"
      @select="onSelect"
      placement="left-start"
    >
      <template #reference>
        <i class="iconfont icon-gengduo3"></i>
      </template>
    </van-popover>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: "首页" },
        { text: "分类" },
        { text: "值得买" },
        { text: "购物车" },
        { text: "我的订单" },
        { text: "我的当当" },
      ],
    };
  },
  methods: {
    onSelect(action, index) {
      Toast("前往" + action.text);
      console.log(index);
      switch (index) {
        case 0:
          this.$router.push({ path: "/home" });
          break;
        case 1:
          this.$router.push({ path: "/category" });
          break;
        case 2:
          this.$router.push({ path: "/buy" });
          break;
        case 3:
          this.$router.push({ path: "/car" });
          break;
        case 4:
          this.$router.push({ path: "/pay" });
          break;
        default:
          this.$router.push({ path: "/my" });
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.herder_title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0px 15px;
  button {
    outline: none;
  }
}
</style>